<template>
  <div class="homework-system">
    <div class="header">
      <h1>作业批改系统</h1>
      <p>智能化的作业管理和批改平台</p>
    </div>
    
    <div class="content">
      <div class="role-selection">
        <h2>请选择您的身份</h2>
        
        <div class="role-cards">
          <!-- 教师端卡片 -->
          <div class="role-card teacher" @click="goToTeacher">
            <div class="card-icon">
              <el-icon size="48">
                <User />
              </el-icon>
            </div>
            <div class="card-content">
              <h3>教师端</h3>
              <p>创建教学任务、批改作业、管理学生</p>
              <ul>
                <li>创建教学任务</li>
                <li>智能批改作业</li>
                <li>学生档案管理</li>
                <li>错题集分析</li>
              </ul>
            </div>
            <div class="card-action">
              <el-button type="primary" size="large">
                进入教师端
              </el-button>
            </div>
          </div>
          
          <!-- 学生端卡片 -->
          <div class="role-card student" @click="goToStudent">
            <div class="card-icon">
              <el-icon size="48">
                <School />
              </el-icon>
            </div>
            <div class="card-content">
              <h3>学生端</h3>
              <p>查看学习任务、提交作业、查看成绩</p>
              <ul>
                <li>查看学习任务</li>
                <li>提交作业</li>
                <li>查看批改结果</li>
                <li>错题复习</li>
              </ul>
            </div>
            <div class="card-action">
              <el-button type="success" size="large">
                进入学生端
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { User, School } from '@element-plus/icons-vue'

const router = useRouter()

const goToTeacher = () => {
  router.push('/homework/teacher')
}

const goToStudent = () => {
  router.push('/homework/student')
}
</script>

<style scoped lang="scss">
.homework-system {
  padding: 40px;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  .header {
    text-align: center;
    margin-bottom: 60px;
    
    h1 {
      font-size: 48px;
      color: white;
      margin-bottom: 16px;
      font-weight: 700;
    }
    
    p {
      font-size: 20px;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .content {
    max-width: 1200px;
    margin: 0 auto;
    
    .role-selection {
      h2 {
        text-align: center;
        color: white;
        font-size: 32px;
        margin-bottom: 40px;
      }
      
      .role-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 40px;
        
        .role-card {
          background: white;
          border-radius: 16px;
          padding: 40px;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          cursor: pointer;
          
          &:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
          }
          
          .card-icon {
            text-align: center;
            margin-bottom: 24px;
            
            .el-icon {
              color: #409EFF;
            }
          }
          
          .card-content {
            h3 {
              font-size: 28px;
              color: #303133;
              margin-bottom: 16px;
              text-align: center;
            }
            
            p {
              font-size: 16px;
              color: #606266;
              margin-bottom: 24px;
              text-align: center;
            }
            
            ul {
              list-style: none;
              padding: 0;
              margin-bottom: 32px;
              
              li {
                padding: 8px 0;
                color: #606266;
                position: relative;
                padding-left: 20px;
                
                &::before {
                  content: '✓';
                  position: absolute;
                  left: 0;
                  color: #67C23A;
                  font-weight: bold;
                }
              }
            }
          }
          
          .card-action {
            text-align: center;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .homework-system {
    padding: 20px;
    
    .header h1 {
      font-size: 32px;
    }
    
    .content .role-selection .role-cards {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
}
</style> 